
<template>
  <div class='article-list'>
    <van-pull-refresh v-model="isRefreshLoading" success-duration='1500' :success-text="SuccessText" @refresh="onRefresh">
      <van-list v-model="Listloading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <article-item v-for=" (item,index)  in article" :key="index" :item='item' />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getArticles } from '@/api/article.js'
import ArticleItem from '@/components/article-item/'
export default {
  components: {
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      timestamp: null,
      article: [],
      isRefreshLoading: false,
      SuccessText: '',
      Listloading: false,
      finished: false
    }
  },
  methods: {
    async onLoad() {
      const { data: res } = await getArticles({
        channel_id: this.channel.id,
        timestamp: this.timestamp ? this.timestamp : Date.now(),
        with_top: 1
      })
      const results = res.data.results
      this.article.push(...results)
      this.Listloading = false
      if (results.length) {
        this.timestamp = res.data.pre_timestamp
      } else {
        this.finished = true
      }
    },
    async onRefresh() {
      const { data: res } = await getArticles({
        channel_id: this.channel.id,
        timestamp: Date.now(),
        with_top: 1
      })
      const results = res.data.results
      this.article.unshift(...results)
      this.isRefreshLoading = false
      if (results.length) {
        this.SuccessText = '更新了' + results.length + '条数据'
      } else {
        this.SuccessText = '没有更多内容了'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.article-list {
  position: fixed;
  top: 90px;
  bottom: 49px;
  width: 100%;
  overflow-y: auto;
}
</style>
